{% extends "public/layout.html" %}

{% block body %}
    <table class="table table-hover table-striped">
        <tr>
            <th>#</th>
            <th>用户id</th>
            <th>用户名</th>
            <th>email</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        {# {% for user in object_list %} #}
        {% for user in userlist %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
                <td class="user_status">
                    {% if user.is_active %}
                        <span class="glyphicon glyphicon-ok-circle text-success"></span>正常
                    {% else %}
                        <span class="glyphicon glyphicon-warning-sign text-warning"></span>禁止
                    {% endif %}
                </td>
                <td>
                    <div class="btn-group">
                    <div class="btn-group">
                        <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
                            修改
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                        </ul>
                    </div>
                    {% if user.is_active %}
                        <button type="button" class="btn btn-sm modify_user_status btn-warning" status="true" data="{{ user.id }}">禁用</button>
                    {% else %}
                        <button type="button" class="btn btn-sm modify_user_status btn-info" status="false" data="{{ user.id }}">开启</button>
                    {% endif %}
                </div>
                </td>
            </tr>
        {% endfor %}
    </table>
    <div class="panel-default">
        <center>
            <ul class="pagination">
                <li><a href="/user/userlistl/?page=1">首页</a></li>
                {% if page_obj.has_previous %}
                    <li><a href="/user/userlistl/?page={{ page_obj.previous_page_number }}">上一页</a></li>
                {% else %}
                    <li class="disabled"><a href="#">上一页</a></li>
                {% endif %}
                {# {% for p in page_obj.paginator.page_range %} #}
                {% for p in page_range %}
                    <li {% if p == page_obj.number %}class="active" {% endif %}><a href="/user/userlistl/?page={{ p }}">{{ p }}</a></li>
                {% endfor %}
                {% if page_obj.has_next %}
                    <li><a href="/user/userlistl/?page={{ page_obj.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="disabled"><a href="#">下一页</a></li>
                {% endif %}
                <li><a href="/user/userlistl/?page={{ page_obj.paginator.num_pages }}">末页</a></li>
            </ul>
        </center>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function() {
            $('.modify_user_status').click(function(){
                var click_obj = $(this);
                var status = click_obj.attr("status");
                var user_id = click_obj.attr("data");
                $.post(
                    "/user/modifystatus/",
                    { "user_id": user_id },
                    function(res) {
                       if (res.status != 0) {
                           swal({
                               title: res.errmsg,
                               type: "error",
                               confirmButtonText: "知道了"
                           });
                       } else if (res.status === 0) {
                           if (status === "true") {
                                click_obj.addClass("btn-info")
                                                    .removeClass("btn-warning")
                                                    .attr("status","false")
                                                    .text("开启");
                                click_obj.parents('td')
                                        .siblings('.user_status')
                                        .html("<span class=\"glyphicon glyphicon-warning-sign text-warning\"></span>禁止");
                            } else {
                                click_obj.addClass("btn-warning")
                                                    .removeClass("btn-info")
                                                    .attr("status","true")
                                                    .text("禁用");
                                click_obj.parents('td')
                                        .siblings('.user_status')
                                        .html("<span class=\"glyphicon glyphicon-ok-circle text-success\"></span>正常");
                            }
                       }
                    }
                )
            })
        })
    </script>
{% endblock %}